<template>
    <div class="edit-standards2" v-loading="loading">
        <el-page-header @back="goBack" content="修改三级类"></el-page-header>
        <div class="information-content">
            <div class="block-box">
                <span class="block-item">
                    <span class="item-name"><i>*</i>所属上级：</span>
                    <span class="item-value">
                        <el-input v-model="form.levelTwoName" :disabled="true"></el-input>
                    </span>
                </span>
                <span class="block-item">
                    <span class="item-name"><i>*</i>编码：</span>
                    <span class="item-value">
                        <el-input v-model="form.code" :disabled="true"></el-input>
                    </span>
                </span>
                <span class="block-item">
                    <span class="item-name"><i>*</i>立案条件：</span>
                    <span class="item-value">
                        <el-input type="textarea" :rows="2" v-model="form.starConditions"></el-input>
                    </span>
                </span>
                <span class="block-item">
                    <span class="item-name"><i>*</i>结案条件：</span>
                    <span class="item-value">
                        <el-input type="textarea" :rows="2" v-model="form.endsConditions"></el-input>
                    </span>
                </span>
                <span class="block-item">
                    <span class="item-name"><i>*</i>责任主体：</span>
                    <span class="item-value">
                        <el-select v-model="form.parentDeptCode" placeholder="" @change="getDepartmentData" >
                            <el-option v-for="item in responsibleData" :value="item.code"  :label="item.name"
                                       :key="item.code"></el-option>
                        </el-select>
                    </span>
                </span>
                <span class="block-item">
                    <span class="item-name"><i>*</i>部门：</span>
                    <span class="item-value">
                        <el-select v-model="form.deptCode" placeholder="" @change="selectDepartment"
                                   :disabled="!form.parentDeptCode">
                            <el-option v-for="item in departmentData" :value="item.code"  :label="item.name"
                                       :key="item.code"></el-option>
                        </el-select>
                    </span>
                </span>
                <span class="block-item">
                    <span class="item-name"><i>*</i>一级行业：</span>
                    <span class="item-value">
                        <el-select v-model="form.industryTypeLv1" placeholder="" @change="selectPrimary"
                        :disabled="!form.deptCode">
                            <el-option v-for="item in primaryData" :value="item.id"  :label="item.name"
                                       :key="item.id"></el-option>
                        </el-select>
                    </span>
                </span>
                <span class="block-item">
                    <span class="item-name"><i>*</i>二级行业：</span>
                    <span class="item-value">
                        <el-select v-model="form.industryTypeLv2" placeholder="" :disabled="!form.industryTypeLv1">
                            <el-option v-for="item in secondaryData" :value="item.id"  :label="item.name"
                                       :key="item.id"></el-option>
                        </el-select>
                    </span>
                </span>
                <span class="block-item">
                    <span class="item-name"><i>*</i>是否缓办：</span>
                    <span class="item-value">
                        <el-select v-model="form.isHb" placeholder="">
                            <el-option value="1" label="是"></el-option>
                            <el-option value="0" label="否"></el-option>
                        </el-select>
                    </span>
                </span>
                <span class="block-item">
                    <span class="item-name"><i>*</i>是否延期：</span>
                    <span class="item-value">
                        <el-select v-model="form.isYq" placeholder="">
                            <el-option value="1" label="是"></el-option>
                            <el-option value="0" label="否"></el-option>
                        </el-select>
                    </span>
                </span>
                <span class="block-item">
                    <span class="item-name"><i>*</i>是否突发：</span>
                    <span class="item-value">
                        <span class="block-item" style="margin-bottom: 0">
                            <span class="item-value">
                                <el-select v-model="form.isTf" placeholder="">
                                    <el-option value="1" label="是"></el-option>
                                    <el-option value="0" label="否"></el-option>
                                </el-select>
                            </span>
                        </span>
                        <span class="block-item" style="margin-bottom: 0">
                            <span class="item-name-small"><i>*</i>是否紧急：</span>
                            <span class="item-value">
                                <el-select v-model="form.isJj" placeholder="">
                                    <el-option value="1" label="是"></el-option>
                                    <el-option value="0" label="否"></el-option>
                                </el-select>
                            </span>
                        </span>
                    </span>

                </span>
                <span class="block-item">
                    <span class="item-name"><i>*</i>A类：</span>
                    <span class="item-value">
                        <el-input v-model="typeDataA.times"></el-input>
                        <el-select class="select-time" v-model="typeDataA.timesUnit" placeholder="">
                            <el-option v-for="item in timeUnitData" :value="item.code" :label="item.name" :key="item.id"></el-option>
                        </el-select>
                        <el-select v-model="typeDataA.timesType" placeholder="">
                            <el-option v-for="item in timeTypeData" :value="item.code" :label="item.name" :key="item.id"></el-option>
                        </el-select>
                    </span>
                </span>
                <span class="block-item">
                    <span class="item-name"><i>*</i>B类：</span>
                    <span class="item-value">
                        <el-input v-model="typeDataB.times"></el-input>
                        <el-select class="select-time" v-model="typeDataB.timesUnit" placeholder="">
                            <el-option v-for="item in timeUnitData" :value="item.code" :label="item.name" :key="item.id"></el-option>
                        </el-select>
                        <el-select v-model="typeDataB.timesType" placeholder="">
                            <el-option v-for="item in timeTypeData" :value="item.code" :label="item.name" :key="item.id"></el-option>
                        </el-select>
                    </span>
                </span>
                <span class="block-item">
                    <span class="item-name"><i>*</i>C类：</span>
                    <span class="item-value">
                        <el-input v-model="typeDataC.times"></el-input>
                        <el-select class="select-time" v-model="typeDataC.timesUnit" placeholder="">
                            <el-option v-for="item in timeUnitData" :value="item.code" :label="item.name" :key="item.id"></el-option>
                        </el-select>
                        <el-select v-model="typeDataC.timesType" placeholder="">
                            <el-option v-for="item in timeTypeData" :value="item.code" :label="item.name" :key="item.id"></el-option>
                        </el-select>
                    </span>
                </span>
            </div>
            <div class="line-item">
                <span class="line-name">案件说明：</span>
                <span class="item-value">
                    <el-input type="textarea" :rows="2" v-model="form.instructions"></el-input>
                </span>
            </div>
            <div class="preserve-btn">
                <el-button type="success" size="small" icon="el-icon-check" @click="saveInfo">保 存</el-button>
                <el-button type="danger" size="small" icon="el-icon-close" @click="goBack">关 闭</el-button>
            </div>
            <div class="upload-image">
                <p class="image-name">图片信息</p>
                <div class="upload-btn">
                    <el-button type="success" size="small" icon="el-icon-upload2" @click="clickUploadImage">上传图片</el-button>
                </div>
                <div class="image-box">
                    <viewer :images="imageData" class="viewer-image">
                        <div class="every-item" v-for="(item,index) in imageData" :key="index">
                            <span class="delete-btn el-icon-delete" @click="deleteImage(item)"></span>
                            <img :src="url + item.picUrl" :data-original="url + item.picUrl" />
                        </div>
                    </viewer>
                </div>
            </div>
        </div>
        <!--弹出层——上传图片-->
        <el-dialog
                title="上传图片"
                class="upload-image"
                :visible.sync="dialogVisible"
                v-dialogDrag
                v-if="dialogVisible"
                :close-on-click-modal="false"
                width="550px">
            <div class="dialog-content" v-loading="dialogLoading">
                <el-upload
                        action="#"
                        list-type="picture-card"
                        :auto-upload="false"
                        :drag="true"
                        :file-list="fileList"
                        :on-change="handleChange">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                <i class="el-icon-zoom-in"></i>
                            </span>
                            <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                                <i class="el-icon-delete"></i>
                            </span>
                        </span>
                    </div>
                </el-upload>
            </div>
            <div class="dialog-footer">
                <el-button type="primary" size="small" :disabled="dialogLoading" @click="uploadToServer">上 传</el-button>
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
            </div>
        </el-dialog>
        <el-dialog title="查看图片" :visible.sync="viewImageDialog" v-dialogDrag v-if="viewImageDialog"
                   :close-on-click-modal="false">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
    import { getresponsible, getDepartmentData, getPrimaryData, getSecondaryData, getImageInfo, deleteImageInfo, uploadImageInfo,
        saveArchivesType, getTimesUnitList, getTimesTypeList } from "@/api/configure/configure";
    export default {
        name: 'EditStandards2',
        data () {
            return {
                // 全局加载
                loading: false,
                // 父级数据
                parentData: [],
                // 责任主体下拉数据
                responsibleData: [],
                // 部门下拉数据
                departmentData: [],
                // 一级行业下拉数据
                primaryData: [],
                // 二级行业下拉数据
                secondaryData: [],
                // 表单数据
                form: {
                    // 数据表示
                    id: '',
                    // 父级id
                    parentId: '',
                    // 所属上级
                    levelTwoName: '',
                    // 编码
                    code: '',
                    // 立案条件
                    starConditions: '',
                    // 结案条件
                    endsConditions: '',
                    // 责任主体
                    parentDeptCode: '',
                    // 部门
                    deptCode: '',
                    // 一级行业
                    industryTypeLv1: '',
                    // 二级行业
                    industryTypeLv2: '',
                    // 是否缓办
                    isHb: '',
                    // 是否延期
                    isYq: '',
                    // 是否突发
                    isTf: '',
                    // 是否紧急
                    isJj: '',
                    // A类
                    timesA: '',
                    timesUnitA: '',
                    timesTypeA: '',
                    // B类
                    timesB: '',
                    timesUnitB: '',
                    timesTypeB: '',
                    // C类
                    timesC: '',
                    timesUnitC: '',
                    timesTypeC: '',
                    // 案件说明
                    instructions: '',
                },
                // A类数据
                typeDataA: {
                    disposalType: "",
                    id: 0,
                    parentId: 0,
                    times: '',
                    timesType: '',
                    timesUnit: '',
                },
                // B类数据
                typeDataB: {
                    disposalType: "",
                    id: 0,
                    parentId: 0,
                    times: '',
                    timesType: '',
                    timesUnit: '',
                },
                // C类数据
                typeDataC: {
                    disposalType: "",
                    id: 0,
                    parentId: 0,
                    times: '',
                    timesType: '',
                    timesUnit: '',
                },
                // 单位数据
                timeUnitData: [],
                // 类型数据
                timeTypeData: [],
                // 弹出层参数
                dialogVisible: false,
                // 弹出层加载
                dialogLoading: false,
                // 单个图片查看地址
                dialogImageUrl: '',
                // 查看图片弹出层
                viewImageDialog: false,
                // 上传的文件列表
                fileList: [],
                // 获取的图片数据
                imageData: [],
                url: process.env.VUE_APP_PROD_API,
            }
        },
        computed:{
            timelineImages(){
                for(let i=0;i<this.eventLogList.length;i++){
                    if(this.eventLogList[i].images.length > 0){
                        return this.eventLogList[i].images;
                    }else{
                        return [];
                    }
                }
            },
            visitedViews() {
                return this.$store.state.tagsView.visitedViews
            },
        },
        methods: {
            /**
             * Description:返回上一级
             * Author:ybt
             * Date:2020/9/21
             */
            goBack(){
                //关闭详情标签
                let viewsTabs=this.visitedViews;
                for(let i=0;i<viewsTabs.length;i++){
                    if(viewsTabs[i].path == '/evaluation/EditStandards2/'){
                        this.closeSelectedTag(viewsTabs[i]);
                    }
                }
            },
            //关闭当前标签
            closeSelectedTag(view) {
                this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
                    if (this.isActive(view)) {
                        this.toLastView(visitedViews, view)
                    }
                })
            },
            refreshSelectedTag(view) {
                this.$store.dispatch('tagsView/delCachedView', view).then(() => {
                    const { fullPath } = view;
                    this.$nextTick(() => {
                        this.$router.replace({
                            path: '/redirect' + fullPath
                        })
                    })
                })
            },
            isActive(route) {
                return route.path === this.$route.path
            },
            toLastView(visitedViews, view) {
                const latestView = visitedViews.slice(-1)[0];
                if (latestView) {
                    this.$router.push(latestView.fullPath)
                } else {
                    if (view.name === 'Dashboard') {
                        this.$router.replace({ path: '/redirect' + view.fullPath })
                    } else {
                        this.$router.push('/')
                    }
                }
            },
            /**
             * Description:获取责任主体下拉数据
             * Author:ybt
             * Date:2020/9/22
             */
            getResponsible(){
                this.loading = true;
                getresponsible({}).then((res) => {
                    this.responsibleData = res.data;
                    this.loading = false;
                }).catch((error) => {
                    this.loading = false;
                    console.log(error, 'getresponsible');
                });
            },
            /**
             * Description:获取部门下拉数据
             * Author:ybt
             * Date:2020/9/21
             */
            getDepartmentData(){
                this.loading = true;
                getDepartmentData({parentId: this.form.parentDeptCode}).then((res) => {
                    this.departmentData = res.data;
                    this.loading = false;
                }).catch((error) => {
                    this.loading = false;
                    console.log(error, 'getDepartmentData');
                });
            },
            /**
             * Description:选择部门触发——获取一级行业下拉数据
             * Author:ybt
             * Date:2020/9/18
             */
            selectDepartment(){
                if (!this.form.deptCode) {
                    // this.$message.error('请先选择部门')
                    return
                }
                let option = {
                    id: this.form.deptCode
                };
                getPrimaryData(option).then((res) => {
                    this.primaryData = res.data;
                }).catch((error) => {
                    console.log(error, 'getPrimaryData');
                });
            },
            /**
             * Description:选择一级行业触发——获取二级行业下拉数据
             * Author:ybt
             * Date:2020/9/18
             */
            selectPrimary(){
                if (!this.form.industryTypeLv1) {
                    // this.$message.error('请先选择一级行业')
                    return
                }
                let option = {
                    id: this.form.industryTypeLv1
                };
                getSecondaryData(option).then((res) => {
                    this.secondaryData = res.data;
                }).catch((error) => {
                    console.log(error, 'getSecondaryData');
                });
            },
            /**
             * Description:获取单位数据
             * Author:ybt
             * Date:2020/9/22
             */
            getTimeUnitData(){
                getTimesUnitList({}).then((res) => {
                    this.timeUnitData = res.data;
                }).catch((error) => {
                    console.log(error, 'getTimesUnitList');
                });
            },
            /**
             * Description:获取工作类型数据
             * Author:ybt
             * Date:2020/9/22
             */
            getTimeTypeData(){
                getTimesTypeList({}).then((res) => {
                    this.timeTypeData = res.data;
                }).catch((error) => {
                    console.log(error, 'getTimesTypeList');
                });
            },
            /**
             * Description:修改保存三级评价标准保存
             * Author:ybt
             * Date:2020/9/22
             */
            saveInfo(){
                this.loading = true;
                this.form.disposalIdA = this.typeDataA.id;
                this.form.timesA = this.typeDataA.times;
                this.form.timesUnitA = this.typeDataA.timesUnit;
                this.form.timesTypeA = this.typeDataA.timesType;
                this.form.disposalIdB = this.typeDataB.id;
                this.form.timesB = this.typeDataB.times;
                this.form.timesUnitB = this.typeDataB.timesUnit;
                this.form.timesTypeB = this.typeDataB.timesType;
                this.form.disposalIdC = this.typeDataC.id;
                this.form.timesC = this.typeDataC.times;
                this.form.timesUnitC = this.typeDataC.timesUnit;
                this.form.timesTypeC = this.typeDataC.timesType;
                if (this.form.timesA !== '') {
                    let parnt = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/;
                    if( !parnt.test(this.form.timesA) ){
                        this.$message.error('A类必须为大于0的数字！');
                        this.loading = false;
                        return
                    }
                }
                if (this.form.timesB !== '') {
                    let parnt = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/;
                    if( !parnt.test(this.form.timesB) ){
                        this.$message.error('B类必须为大于0的数字！');
                        this.loading = false;
                        return
                    }
                }
                if (this.form.timesC !== '') {
                    let parnt = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/;
                    if( !parnt.test(this.form.timesC) ){
                        this.$message.error('C类必须为大于0的数字！');
                        this.loading = false;
                        return
                    }
                }
                saveArchivesType(this.form).then((res) => {
                    this.$message.success("保存成功");
                    this.goBack();
                    this.loading = false;
                }).catch((error) => {
                    this.loading = false;
                    console.log(error, 'saveArchivesType');
                });
            },
            /**
             * Description:获取三级类图片信息
             * Author:ybt
             * Date:2020/9/21
             */
            getImageInfo(type){
                getImageInfo({id: this.parentData.id}).then((res) => {
                    this.imageData = res.data;
                    if (type === 1) {
                        this.$message.success('上传成功')
                    } else if (type === 2) {
                        this.$message.success('删除成功')
                    }
                    this.loading = false;
                }).catch((error) => {
                    this.loading = false;
                    console.log(error, 'getImageInfo');
                });
            },
            /**
             * Description:点击【上传图片】按钮触发
             * Author:ybt
             * Date:2020/9/21
             */
            clickUploadImage(){
                this.fileList = [];
                this.dialogLoading = false;
                this.dialogVisible = true;
            },
            /**
             * Description:删除未上传图片
             * Author:ybt
             * Date:2020/9/21
             */
            handleRemove(file) {
                this.fileList.forEach((item, index) => {
                    if (item.uid === file.uid) {
                        this.fileList.splice(index, 1)
                    }
                })
            },
            /**
             * Description:点击查看图片
             * Author:ybt
             * Date:2020/9/21
             */
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.viewImageDialog = true;
            },
            /**
             * Description:文件状态改变时的钩子
             * Author:ybt
             * Date:2020/9/21
             */
            handleChange(res){
                this.fileList.push(res)
            },
            /**
             * Description:点击上传按钮上传至服务器
             * Author:ybt
             * Date:2020/9/21
             */
            uploadToServer(){
                this.dialogLoading = true;
                let formDataCurrent = new FormData();
                this.fileList.map(tt => {
                    formDataCurrent.append('file', tt.raw);
                });
                formDataCurrent.append('parentId', this.parentData.id);
                uploadImageInfo(formDataCurrent).then((res) => {
                    // 获取三级类图片信息
                    this.getImageInfo(1);
                    this.dialogVisible = false;
                    this.dialogLoading = false;
                }).catch((error) => {
                    this.dialogLoading = false;
                    console.log(error, 'uploadImageInfo');
                });
            },
            /**
             * Description:删除已上传的图片
             * Author:ybt
             * Date:2020/9/21
             */
            deleteImage(item){
                this.$confirm('确定删除该条图片信息吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    this.loading = true;
                    deleteImageInfo({id: item.id}).then((res) => {
                        // 获取三级类图片信息
                        this.getImageInfo(2);
                        this.loading = false;
                    }).catch((error) => {
                        this.loading = false;
                        console.log(error, 'deleteImageInfo');
                    });
                }).catch(() => {
                    this.$message.info('已取消删除');
                });
            },
        },
        created(){
            if (this.$route.params && this.$route.params.standardsData) {
                this.parentData = this.$route.params.standardsData;
                sessionStorage.setItem('parentData', JSON.stringify(this.parentData))
            } else {
                this.parentData = JSON.parse(sessionStorage.getItem('parentData'));
            }
            // 表单数据
            this.form.id = this.parentData.id;
            this.form.parentId = this.parentData.parentId;
            this.form.levelTwoName = this.parentData.levelTwoName;
            this.form.code = this.parentData.code;
            this.form.starConditions = this.parentData.starConditions;
            this.form.endsConditions = this.parentData.endsConditions;
            this.form.parentDeptCode = this.parentData.parentDeptCode && this.parentData.parentDeptCode.toString();
            this.form.deptCode = this.parentData.deptCode && this.parentData.deptCode.toString();
            this.form.industryTypeLv1 = this.parentData.industryTypeLv1 && this.parentData.industryTypeLv1.toString();
            this.form.industryTypeLv2 = this.parentData.industryTypeLv2 && this.parentData.industryTypeLv2.toString();
            this.form.isHb = this.parentData.isHb;
            this.form.isYq = this.parentData.isYq;
            this.form.isTf = this.parentData.isTf;
            this.form.isJj = this.parentData.isJj;
            this.parentData.archivesDisposal.forEach(item => {
                if (item.disposalType === 'A') {
                    this.typeDataA = item;
                    this.typeDataA.timesType = this.typeDataA.timesType && this.typeDataA.timesType.toString();
                    this.typeDataA.timesUnit = this.typeDataA.timesUnit && this.typeDataA.timesUnit.toString();
                } else if (item.disposalType === 'B') {
                    this.typeDataB = item;
                    this.typeDataB.timesType = this.typeDataB.timesType && this.typeDataB.timesType.toString();
                    this.typeDataB.timesUnit = this.typeDataB.timesUnit && this.typeDataB.timesUnit.toString();
                } else if (item.disposalType === 'C') {
                    this.typeDataC = item;
                    this.typeDataC.timesType = this.typeDataC.timesType && this.typeDataC.timesType.toString();
                    this.typeDataC.timesUnit = this.typeDataC.timesUnit && this.typeDataC.timesUnit.toString();
                }
            })
            this.form.instructions = this.parentData.instructions;
            // 获取责任主体下拉数据
            this.getResponsible();
            // 获取部门下拉数据
            this.getDepartmentData();
            // 获取一级行业下拉数据
            this.selectDepartment();
            // 获取二级行业下拉数据
            this.selectPrimary();
            // 获取工作单位数据
            this.getTimeUnitData();
            // 获取工作时效数据
            this.getTimeTypeData();
            // 获取三级类图片信息
            this.getImageInfo();
        }
    }
</script>

<style lang="scss">
    .edit-standards2{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background-color: #FFFFFF;
        overflow: hidden;
        .el-page-header{
            padding: 0.0625rem 0.1875rem;
            background-color: #fafafa;
            border-bottom: 0.0125rem solid #ddd;
            .el-page-header__left:hover{
                color: #1890ff;
            }
            .el-page-header__content{
                font-size: 0.1875rem !important;
                cursor: default;
            }
        }
        .information-content{
            display: flex;
            flex-direction: column;
            flex: 1;
            padding: 0.25rem 0 0.125rem 0.375rem;
            font-size: 0.175rem;
            overflow: auto;
            .block-box{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                padding-right: 10%;
            }
            .block-item{
                width: 50%;
            }
            .block-item,.line-item{
                display: flex;
                flex-direction: row;
                white-space: nowrap;
                margin-bottom: 0.1875rem;
                .item-name{
                    width: 30%;
                    min-width: 1.25rem;
                }
                .item-name,.item-name-small,.line-name{
                    padding-right: 0.125rem;
                    text-align: right;
                    line-height: 0.425rem;
                    i{
                        color: #f00;
                        padding-right: 0.0375rem;
                    }
                }
                .item-name-small{
                    width: 1.25rem;
                }
                .line-name{
                    width: 15%;
                    min-width: 1.25rem;
                }
                .item-value{
                    display: flex;
                    flex: 1;
                    min-width: 1.875rem;
                    .el-input,.el-select{
                        width: 100%;
                        height: 0.425rem;
                        line-height: 0.425rem;
                    }
                    .select-time{
                        margin: 0 0.25rem;
                    }
                }
            }
            .line-item{
                padding-right: 10%;
            }
            .preserve-btn{
                text-align: center;
            }
            .upload-image{
                padding-right: 0.375rem;
                .image-name{
                    font-size: 0.1875rem;
                    color: #6379bb;
                    border-bottom: 0.0125rem solid #ddd;
                    margin: 0.125rem 0;
                    padding-bottom: 0.0625rem;
                }
                .upload-btn{
                    margin-bottom: 0.125rem;
                }
                .image-box{
                    display: flex;
                    .viewer-image{
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                    }
                    .every-item{
                        border: 0.0125rem solid #ddd;
                        margin-right: 0.1875rem;
                        margin-bottom: 0.1875rem;
                        position: relative;
                        &:hover{
                            .delete-btn{
                                opacity: 1;
                            }
                        }
                        .delete-btn{
                            opacity: 0;
                            color: #1890ff;
                            font-weight: bold;
                            cursor: pointer;
                            position: absolute;
                            right: 0.0375rem;
                            top: 0.0375rem;
                            &:hover{
                                color: #FF0000;
                            }
                        }
                        img{
                            width: 1.8125rem;
                            height: 1.25rem;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
        .upload-image{
            .dialog-content{
                padding: 0 0 0.125rem 0.375rem;
                overflow: auto;
                &>div{
                    max-height: 5.8375rem;
                }
                .el-upload-dragger{
                    width: 1.825rem !important;
                    height: 1.825rem !important;
                }
            }
            .dialog-footer{
                text-align: center;
            }
        }
        .el-dialog__body{
            padding: 0.125rem 0.25rem 0.25rem 0.25rem !important;
        }
    }
</style>
